<!--
 * @description: 文件描述
 * @version: 0.0.1
 * @author: xxx
 * @Date: 2024-05-14 10:39:14
-->
<template>
    <el-form :model="props.formData" ref="ruleFormRef" :rules="props.formRules">
        <el-form-item v-for="(item, idx) in formItemOption" :key="idx" :label="item.label" :prop="item.prop">
            <el-input v-if="item.comType === 'input'" v-model="props.formData[item.prop]"
                :type="item.optionsData.type"></el-input>
            <el-switch v-if="item.comType === 'switch'" v-model="props.formData[item.prop]" class="ml-2" />
            <select-v2 v-if="item.comType === 'selectV2'" :options="item.optionsData.options"
                v-model:modelValue="props.formData[item.prop]" />
            <el-button v-if="item.comType === 'button'" :type="item.optionsData.type"
                @click="submitBtn(item.optionsData.btnType)">{{ item.optionsData.text }}</el-button>
        </el-form-item>
    </el-form>  
</template>
<script setup lang="ts">
import { ref } from "vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
const props = defineProps({
    formData: {
        type: Object,
        default: () => ({}),
    },
    formRules: {
        type: Object,
        default: () => ({}),
    },
    formItemOption: {
        type: Array,
        default: () => [],
    },
    formSize: {
        type: String,
        default: "medium",
    },
    formLabelWidth: {
        type: String,
        default: "80px",
    },
});
const ruleFormRef = ref(null);
const emit = defineEmits(["submit"]);

const submitBtn = async (btnType: string | undefined) => {
    if (btnType === "submit") {
        console.log(ruleFormRef.value, "ooooooooooooo");
        if (!ruleFormRef.value) return;
        ruleFormRef.value.validate(async (valid: any) => {
            console.log(valid, "valid");
            if (valid) {
                emit("submit", props.formData);
            } else {
                console.log("error submit!!");
                return false;
            }
        });
    } else {
    }
};
</script>

<style scoped></style>